<template>
  <view
    class="poi-phone-box"
    @click="toPOIDetail(messageData.poiId, messageData.destId)"
  >
    <image
      :src="messageData.poiImageUrl"
      mode="aspectFill"
      class="poi-phone-img"
      :data-spmCntSuffix="`ChatAiPage.message@2.poiCard@toPOIDetail`"
      :data-custom="1"
      :data-spm="messageData.poiId"
    />
    <view class="poi-phone-right">
      <view class="poi-phone-title">{{ messageData.poiName }}</view>
      <rich-text
        :nodes="messageData.introduction"
        class="poi-phone-content omit3"
        style="word-break: break-all; white-space: pre-line"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    messageData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    // 跳转POI详情
    toPOIDetail(poiId, destId) {
      uni.navigateTo({
        url: '/ai/pages/POIDetail/index?poiId=' + poiId + '&destId=' + destId,
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.poi-phone-box {
  height: 246rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  display: flex;
  margin: -11rpx 20rpx 4rpx 20rpx;
  padding: 18rpx;
  .poi-phone-img {
    width: 210rpx;
    height: 210rpx;
    border-radius: 16rpx;
  }
  .poi-phone-right {
    display: flex;
    flex-direction: column;
    margin-left: 18rpx;
    flex: 1;
    .poi-phone-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #131328;
      line-height: 45rpx;
      margin-top: 14rpx;
    }
    .poi-phone-content {
      font-weight: 400;
      font-size: 24rpx;
      color: #767697;
      line-height: 34rpx;
      margin-top: 12rpx;
    }
  }
}
</style>
